﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>2-6</title>
 <!--   引入jQuery --> 
 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="../scripts/assist.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="../styles/selectstyle.css" /> 
  <script type="text/javascript">
  $(document).ready(function(){
	   //选择第一个div元素.
	  $("#btn1").click(function () {
		  $("div:first").css("background", "#bfa")
	  })
	  //选择最后一个div元素.
	  $("#btn2").click(function () {
		  $("div:last").css("background", "#bfa")
	  })
	  //选择class不为adc的 所有div元素.
	  $("#btn3").click(function () {
		  $("div:not(.adc)").css("background", "#bfa")
	  })
	  //选择 索引值为偶数 的div元素。
	  $("#btn4").click(function () {
		  $("div:even").css("background", "#bfa")
	  })
	  //选择 索引值为奇数 的div元素。
	  $("#btn5").click(function () {
		  $("div:odd").css("background", "#bfa")
	  })
	  //选择 索引等于 3 的元素
	  $("#btn6").click(function () {
		  $("div:eq(3)").css("background", "#bfa")
	  })
	  //选择 索引大于 3 的元素
	  $("#btn7").click(function () {
		  $("div:gt(3)").css("background", "#bfa")
	  })
	 //选择 索引小于 3 的元素
	  $("#btn8").click(function () {
		  $("div:lt(3)").css("background", "#bfa")
	  })
	  //选择 所有的标题元素.比如h1, h2, h3等等...
	  $("#btn9").click(function () {
		  $(":header").css("background", "#bfa")
	  })
	  //选择 当前正在执行动画的所有元素.
	  $("#btn10").click(function () {
		  $(":animated").css("background", "#bfa")
	  })
  });
  </script>
</head>
<body>
  <h3>基本过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

  <input type="button" value="选择第一个div元素." id="btn1"/>
  <input type="button" value="选择最后一个div元素." id="btn2"/>
  <input type="button" value="选择class不为adc的 所有div元素." id="btn3"/>
  <input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
  <input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
  <input type="button" value="选择索引值等于3的元素." id="btn6"/>
  <input type="button" value="选择索引值大于3的元素." id="btn7"/>
  <input type="button" value="选择索引值小于3的元素." id="btn8"/>
  <input type="button" value="选择所有的标题元素." id="btn9"/>
  <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
 
<br /><br />
 
   <!-- 测试的元素 -->
	<div class="adc" id="adc">
		id为adc<br />class为adc<br />div（女警0）<br />
		<div class="sup">class为sup<br />div（曙光1）</div>
	</div>
	<div class="adc" id="tank" title="top">
		id为tank<br />class为adc<br />title为top<br />div（德玛2）<br />
		<div class="sup" title="mid">class为sup<br />title为mid<br />div（宝石3）<br /></div>
		<div class="sup" title="mid">class为sup<br />title为mid<br />div（璐璐4）</div>
	</div>
	<div class="adc">
		class为adc<br />div（EZ5）<br />
		<div class="sup">class为sup<br />div（琴女6）</div>
		<div class="sup">class为sup<br />div（星妈7）</div>
		<div class="sup">class为sup<br />div（鲛姬8）</div>
		<div class="sup">class为sup<br />div（牛头9）</div>
	</div>
	<div class="adc">
		class为adc<br />div（奥巴马10）<br />
		<div class="sup">class为sup<br />div（凤女11）</div>
		<div class="sup">class为sup<br />div（机器人12）</div>
		<div class="sup">class为sup<br />div（狗熊13）</div>
		<div class="sup" title="tesst">class为sup<br />title为tesst<br />div（雪人14）</div>
	</div>
	<div style="display:none;" class="none">
		style的display为"none"<br />div（VN15）
	</div>
	<div class="hide">
		class为"hide"<br />div（螃蟹16）
	</div>

	<div>
		包含input<br />type为"hidden"<br />div（飞机17）<br />
		<input type="hidden" size="8" />
	</div>
	<span id="mover">正在执行动画<br />span元素.</span>
</body>
</html>
